<template>
  <div class="tabbar">
    <ul>
        <router-link
         :to="item.path"
         tag="li"
         v-for="item in tabList"
         :key="item.title"
        >
            <i class="iconfont" v-html="item.meta.icon"></i>
            <span>{{item.meta.title}}</span>
        </router-link>
    </ul>
  </div>
</template>

<script>
import routers from '@/router/routes'
export default {
  name: 'tabbar',
  computed: {
    tabList() {
      return routers.filter(item => { return item.meta?.inBar })
    },
  },
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 3284588 */
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_3284588_3j663noudyi.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_3284588_3j663noudyi.woff') format('woff'),
  url('//at.alicdn.com/t/font_3284588_3j663noudyi.ttf') format('truetype'),
  url('#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

    ul{
        display: flex;
        justify-content: space-around;
        height: 50px;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
                color: rgb(138, 138, 138);

            i{
                font-size: 26px !important;
            }
        }
    }
</style>
